Self-Promotional Website
------------------------

For my final assignment in Responsive Web Design 2, I was tasked with building a self-promotional website I designed for my User Experience course that showcases a collection of the work I have made within the Interactive Media design program thus far. 

I have always been attracted to the aesthetic of nautical, sailing imagery, and tattoo art, while finding the mytholgies surrounding sirens and mermaids inticing topics I wanted to explore in my design work. As such, I came up with the website Nautical Designs, a self-promotional site of my work that playfully engages with the theme of sea-faring fantasy.

This website was built using the Bootstrap framework and CSS3. I chose to use Bootstrap while writing my HTML code as I found it was a quick and efficient way to build the infrastructure of my website. Having played around with the framework on previous assignments, I realized that the framework requires less code that manual builds in order to get a website up and running, making it an ideal choice for quick set up.

I found building the skeletal structure for the website with the Bootstrap framework to go relatively quickly, making the process of organizing the page layouts much less time consuming. However, I quickly learned that customizing each of the components and UI elements with CSS styling and overrides to be somewhat of a steep learning curve. At the time of writing, the greatest problem I faced in putting this site together involved setting up the masonry image tiling layout for the portfolio page while getting the images to stay within the dimensions of the container. I solved this issue by doing further research on Bootstrap at getbootstrap.com, and discovered the .img-fluid Bootstrap class which I attributed to my images. As I was spending more time building the infrastructure, I learned more about Bootstrap's classes and styling rules, which in turn meant that I didn't need to input too much custom CSS to style the website.

# Resources
------------

The following list includes a list of the images, frameworks, and icons that I used in order to make this site possible:

- The Bootstrap 4 framework used for this site can be found at https://getbootstrap.com. The reboot.css stylesheet I used was found at https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css.

- Photos used for the site were derived were found at https://unsplash.com/ and https://burst.shopify.com

    w/ photo credits attributed to Nick Morrison (https://unsplash.com/photos/FHnnjk1Yj7Y),
    Sarah Pflug (https://burst.shopify.com/photos/feedback-for-web-design-mockups?q=responsive+web) and (https://burst.shopify.com/photos/finger-pointing-at-javascript-code?q=coding), and Shopify Partners (https://burst.shopify.com/photos/black-friday-sale-tablet?q=ecommerce).

- Social media icons were found at https://fontawesome.com

- The fonts used can be found at these addresses:

    https://fonts.google.com/specimen/Vollkorn?selection.family=Vollkorn

    https://fonts.google.com/specimen/Raleway?selection.family=Raleway

    https://fonts.google.com/specimen/Merriweather?selection.family=Merriweather